<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 兼容IE各个版本，内置了Chrome插件的用Chrome内核 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- 给浏览器指定内核 -->
    <meta name="renderer" content="webkit">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script src="/public/ueditor/ueditor.parse.js"></script>
    <title>I'm A Blog</title>
    <link rel="stylesheet" href="/public/css/bootstrap.min.css">
    <link rel="stylesheet" href="/public/css/normalize.min.css">
    <link rel="stylesheet" href="/public/css/main.css">
    <script type="text/javascript" src="/public/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>
    <link rel="stylesheet" type="text/css" href="/public/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css">
</head>
<body>
<!-- 头部开始 -->
<header>
    <div class="backImg"><img src="/public/images/my.png"></div>
</header>
<!-- 头部结束 -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- 导航条开始 -->
<nav>
    <div class="navbar navbar-default">
        <div class="navbar-header">
            <a class="navbar-brand" href="/">Blog</a>
            <button data-toggle="collapse" data-target="#intel-collapse" class="navbar-toggle" type="button">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div id="intel-collapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="/">首页</a></li>
                {% for category in categories %}
                <li><a href="/?category={{ category.id }}">{{ category.name }}</a></li>
                {% endfor%}
            </ul>
        </div>
    </div>
</nav>
<!-- 导航条结束 -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- 主体内容区开始 -->
<main>
    <div class="row">
        <!-- 文章 -->
        <div class="col-sm-11 col-xs-12">

            <div class="mainLeft">
                <!-- 文章 -->
                <div class="listBox">
                    <h3>{{content.title}}</h3>
                    <p class="colDefualt">
                        作者：<span class="colInfo">{{content.author}}</span>
                        -时间：<span class="colInfo">{{content.addDat}}</span>
                        -阅读：<span class="colInfo">{{content.views}}</span>
                        -评论：<span id="commentC" class="colInfo">{{content.comment || '没有评论'}}</span>
                    </p>

                    <div class="content">{{content.content}}</div>
                    <a href="javascript:history.go(-1);location=document.referrer">
                        <button class="btn btn-primary ">返&nbsp;&nbsp;&nbsp;&nbsp;回</button>
                    </a>
                </div>

                <!-- 评论 -->
                <div class="listBox message">
                    <h4 class="textLeft">
                        <strong>评论</strong> <span class="fr">一共有 <em id='messageCount'></em>条评论</span>
                    </h4>
                    <input type="hidden" name="contentid" class="contentId" value="{{content.id}}">
                    {% if userInfo._id %}
                    <p class="textLeft clear">
                        <input type="hidden" name="contentid" id="contentId" value="{{content.id}}">
                        <textarea id="commentTextarea" class="commit_textarea"
                                  placeholder="请填写你的评论~" rows="20" cols="20" wrap="hard"></textarea>
                        <button id="messageBtn" class="submit commit_submit">提交</button>
                    </p>
                    {% else %}
                    <p class="bgDanger danger">登录才可以评论，请先<a href="/">登录</a>！</p>
                    {% endif %}

                    <div id="messageList" id="commitList" style="display: block;"></div>

                    <div class="pager">
                        <ul class="clear">
                            <li class="previous">
                                <a href="javascript:;">
                                    上一页
                                </a>
                            </li>
                            <li>

                            </li>
                            <li class="next">
                                <a href="javascript:;">
                                   下一页
                                </a>
                            </li>
                        </ul>
                    </div>

                </div>

            </div>
        </div>
    </div>
</main>
<!-- 主体内容结束 -->

<!-- 页脚 -->
<!--<footer>-->
    <!--<div>Copyright ©1997-2500 TQZ Personal, All Rights Reserved</div>-->
<!--</footer>-->

<script src="/public/js/jquery.min.js"></script>
<script src="/public/js/index.js"></script>
<script src="/public/js/bootstrap.min.js"></script>
<script src="/public/js/comment.js"></script>
<script type="text/javascript">
    $(function () {
        //解决手机端代码块显示换行后行号显示不正确问题
        SyntaxHighlighter.highlight();
        $("table.syntaxhighlighter").each(function () {
            if (!$(this).hasClass("nogutter")) {
                var $gutter = $($(this).find(".gutter")[0]);
                var $codeLines = $($(this).find(".code .line"));
                $gutter.find(".line").each(function (i) {
                    $(this).height($($codeLines[i]).height());
                    $($codeLines[i]).height($($codeLines[i]).height());
                });
            }
        });
    });
    SyntaxHighlighter.all();
</script>
</body>
</html>